<!--
  @文件名： menuItemCom
  @来源：YongPing.Wang|2023/11/21 12:59
  @描述：
-->
<template>
  <el-menu-item @click="openUrl(item)" :index="item.componentUrl" v-if="item.children && item.children.length === 0">
    <el-icon v-if="item.icon">
      <component :is="item.icon" />
    </el-icon>
    <template #title>
      <div class="custom-menuitem LG-nowrap-one">{{ item.menuName }}</div>
    </template>
  </el-menu-item>
  <el-sub-menu :index="item.id" v-else>
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      <div class="custom-menuitem LG-nowrap-one">{{ item.menuName }}</div>
    </template>
    <template v-for="itemTwo in item.children" :key="itemTwo.id">
      <menuItemCom :item="itemTwo" />
    </template>
  </el-sub-menu>
</template>

<script setup lang="ts">
  import { type IMenu } from '@/store/menuInfo.ts'
  import { useRouter } from 'vue-router'

  interface Iprops {
    item: IMenu
  }

  defineProps<Iprops>()

  const router = useRouter()

  // 打开链接
  const openUrl = (data: IMenu): void => {
    void router.push({
      path: data.componentUrl,
    })
  }
</script>

<style scoped lang="scss">
  .custom-menuitem {
    max-width: 180px;
    display: inline-block;
  }
</style>
